import LPopup from "@/components/public/lPopup/lPopup";
import { defineComponent, reactive, ref } from "vue";
import styles from "./editPopup.module.less"
import LForm, { LFormItem } from "@/components/public/lForm/lForm";
import { message } from "ant-design-vue";
import _ from "lodash";
export default defineComponent({
  props: {
    service: {
      type: Object,
      required: true,
    },
  },
  emits: ["cancel", "confirm"],
  setup(props, { emit, expose }) {
    const state_default = {
      form: {
        id: '',
        name: '',//名称
        code: '',//编码
        type: '',//类型
        units: []//单位
      },
      options: {
        type: [
          {
            label: '字符串',
            value: 'string',
          },
          {
            label: '文本',
            value: 'text',
          },
          {
            label: '列表',
            value: 'list',
          },
          {
            label: '范围',
            value: 'area',
          },
          {
            label: '数字',
            value: 'num',
          },
          {
            label: '布尔值',
            value: 'bool',
          },
        ],
        is_multiple: [
          {
            label: '是',
            value: 1,
          },
          {
            label: '否',
            value: 2,
          },
        ],
      }
    }
    const state: any = reactive(
      _.cloneDeep(state_default)
    );
    const editPopupRef = ref(null as any);
    //打开弹窗
    const open = (e: any) => {
      if (e === undefined) {
        editPopupRef.value.open();
      } else {
        state.form = e;
        state.form.units || (state.form.units = []);
        editPopupRef.value.open();
      }
    }
    //关闭弹窗
    const close = () => {
      editPopupRef.value.close();
    };
    //确认
    const confirmHandler = (done: any) => {
      if (state.form.id) {
        props.service.edit(state.form).then((res: any) => {
          message.success("编辑属性成功");
          close();
        }).finally(() => { done() })
      } else {
        props.service.add(state.form).then((res: any) => {
          message.success("添加属性成功");
          close();
        }).finally(() => { done() })
      }
      emit("confirm");
    }

    const FixedGuaranteeTable = ({ pn, pl, op, pad = "10px 0" }: any) => (
      <div class={styles.planConfRowBox}>
        <div class={styles.guaranteeContent} style={{ padding: pad }}>
          {pn && pn()}
        </div>
        <div class={styles.planContent} style={{ padding: pad }}>
          {pl && pl()}
        </div>
        <div class={styles.operate} style={{ padding: pad }}>
          {op && op()}
        </div>
      </div>
    );
    expose({
      open,
      close,
    });
    const Components = () => (
      <LPopup title={state.form.id ? "编辑属性" : "添加属性"} ref={editPopupRef}>
        <div class={styles.editPopup}>
          <div class={styles.editPopupContent}>
            <LForm
              btns={["cancel", "confirm"]}
              v-model={state.form}
              onCancel={() => {
                Object.entries(
                  _.cloneDeep(state_default)
                ).forEach(item => {
                  state[item[0]] = item[1];
                })
                editPopupRef.value.close();
              }}
              onConfirm={(e: any) => {
                confirmHandler(e.done);
              }}
            >
              <LFormItem label="属性名称" prop="">
                <a-input
                  v-model:value={state.form.name}
                ></a-input>
              </LFormItem>
              <LFormItem label="编码" prop="">
                <a-input
                  v-model:value={state.form.code}
                ></a-input>
              </LFormItem>
              <LFormItem label="类型" prop="">
                <a-select
                  v-model:value={state.form.type}
                  options={state.options.type}
                  style="width: 100%"
                ></a-select>
              </LFormItem>
              <LFormItem label="单位" prop="">
                <div class={styles.planConfBody}>
                  <div class={styles.planConfBox}>
                    <FixedGuaranteeTable
                      pn={() => <div class={styles.planConLabel}>单位名称</div>}
                      pl={() => <div class={styles.planConLabel}>单位标识</div>}
                      op={() => <div class={styles.planConLabel}>操作</div>}
                    />
                    {
                      state.form.units?.map?.((x: any, index: any) => {
                        return (
                          <FixedGuaranteeTable
                            pn={() => (
                              <div
                                style={{
                                  width: "100%",
                                  padding: "0 5px",
                                }}
                              >
                                <a-input
                                  placeholder="请输入单位名称"
                                  v-model={[x.name, "value"]}
                                />
                              </div>
                            )}
                            pl={() => (
                              <div
                                style={{
                                  width: "100%",
                                  padding: "0 5px",
                                }}
                              >

                                <a-input
                                  placeholder="请输入单位标识"
                                  v-model={[x.mark, "value"]}
                                />
                              </div>
                            )}
                            op={() => (
                              <div
                                class={styles.planConLabel}
                                style={{
                                  width: "100%",
                                  padding: "0 5px",
                                }}
                              >
                                <a-button
                                  type="primary"
                                  size="small"
                                  danger
                                  onClick={() => {
                                    state.form.units.splice(index, 1);
                                  }}
                                >
                                  删除
                                </a-button>
                              </div>
                            )}
                            pad="5px 0"
                          />
                        )
                      })
                    }
                  </div>
                  <div class={styles.schemeContentButton}>
                    <a-button
                      type="primary"
                      size="small"
                      onClick={() => {
                        state.form.units.push({
                          name: "",
                          mark: "",
                        });
                      }}
                    >
                      添加新单位
                    </a-button>
                  </div>
                </div>
              </LFormItem>
            </LForm>
          </div>
        </div>
      </LPopup>
    );
    return {
      Components,
    }
  },
  render() {
    return <this.Components />;
  },
})